const textElement = document.querySelector('.text');

/*白色导航栏*/
textElement.addEventListener('click', () => {
    textElement.classList.toggle('active');
});


/*图片放大start */
const zoomContainer = document.querySelector('.zoom-container');
const zoomBox = document.querySelector('.zoom-box');
const zoomedImage = document.querySelector('.zoomed-image');
const originalImage = document.querySelector('.original-image');

const zoomRatio = 1; // 放大倍数
const zoomBoxSize = 100; // 放大镜区域的大小

zoomContainer.addEventListener('mousemove', function(event) {
  const rect = zoomContainer.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  // 确保放大镜区域不会超出原图的边界
  const maxX = zoomContainer.offsetWidth - zoomBoxSize;
  const maxY = zoomContainer.offsetHeight - zoomBoxSize;

  const zoomBoxLeft = Math.min(Math.max(x - zoomBoxSize / 2, 0), maxX);
  const zoomBoxTop = Math.min(Math.max(y - zoomBoxSize / 2, 0), maxY);

  // 设置放大镜区域的位置
  zoomBox.style.left = `${zoomBoxLeft}px`;
  zoomBox.style.top = `${zoomBoxTop}px`;

  // 计算放大后图片的显示区域
  const zoomedImageLeft = -zoomBoxLeft * zoomRatio;
  const zoomedImageTop = -zoomBoxTop * zoomRatio;

  zoomedImage.style.left = `${zoomedImageLeft}px`;
  zoomedImage.style.top = `${zoomedImageTop}px`;

  // 显示放大镜区域和放大后的图片
  zoomBox.style.display = 'block';
  zoomedImage.style.display = 'block';
});

zoomContainer.addEventListener('mouseleave', function() {
  // 鼠标离开时隐藏放大镜区域和放大后的图片
  zoomBox.style.display = 'none';
  zoomedImage.style.display = 'none';
});
/*图片放大end */


/*画廊 start*/
document.addEventListener("DOMContentLoaded", function () {
  // 获取画廊中的所有图片
  const galleryImages = document.querySelectorAll(".gallery ul li img");
  // 获取主图片
  const mainImage = document.querySelector(".original-image");
  const zoomedImage = document.querySelector(".zoomed-image");

  // 为画廊中的每个图片添加鼠标悬停事件
  galleryImages.forEach((img) => {
      img.addEventListener("mouseover", function () {
          // 获取当前鼠标悬停的图片路径
          const imgSrc = this.src;
          // 更新主图片和放大后图片的路径
          mainImage.src = imgSrc;
          zoomedImage.src = imgSrc;
      });
  });

  // 获取左右箭头按钮
  const prevArrow = document.querySelector(".prev-arrow");
  const nextArrow = document.querySelector(".next-arrow");
  const ulList = document.querySelectorAll(".gallery ul");

  let currentIndex = 0; // 当前显示的 ul 索引

  // 显示当前 ul，隐藏其他 ul
  function showCurrentUl(index) {
      ulList.forEach((ul, i) => {
          if (i === index) {
              ul.style.display = "flex";
          } else {
              ul.style.display = "none";
          }
      });
  }

  // 初始化显示第一个 ul
  showCurrentUl(currentIndex);

  // 点击左箭头
  prevArrow.addEventListener("click", function () {
      if (currentIndex > 0) {
          currentIndex--;
      }
      showCurrentUl(currentIndex);
  });

  // 点击右箭头
  nextArrow.addEventListener("click", function () {
      if (currentIndex < ulList.length - 1) {
          currentIndex++;
      }
      showCurrentUl(currentIndex);
  });
});
/*画廊 end*/
/* 右侧start */
document.addEventListener("DOMContentLoaded", function () {
    // 获取所有 .phone-box 容器
    const phoneBoxes = document.querySelectorAll(".phone-box");

    phoneBoxes.forEach(phoneBox => {
        // 获取当前 .phone-box 容器中的所有 div
        const divs = phoneBox.querySelectorAll("div");

        // 默认选中第一个 div
        divs[0].classList.add("active");

        // 为每个 div 添加点击事件监听器
        divs.forEach(div => {
            div.addEventListener("click", () => {
                // 移除所有 div 的 active 类
                divs.forEach(d => d.classList.remove("active"));
                // 为当前点击的 div 添加 active 类
                div.classList.add("active");
            });
        });
    });
}); 
/* 右侧end */ 

document.addEventListener("DOMContentLoaded", function () {
    const uls = document.querySelectorAll(".thing-main ul");
    const btnLeft = document.querySelector(".btnleft");
    const btnRight = document.querySelector(".btnright");
    let currentIndex = 0;

    function showCurrentUl() {
        uls.forEach((ul, index) => {
            if (index === currentIndex) {
                ul.classList.add("active"); // 显示当前 ul
            } else {
                ul.classList.remove("active"); // 隐藏其他 ul
            }
        });
    }

    // 初始化时只显示第一个 ul
    showCurrentUl();

    // 左按钮点击事件
    btnLeft.addEventListener("click", () => {
        currentIndex = (currentIndex - 1 + uls.length) % uls.length; // 循环到前一个
        showCurrentUl();
    });

    // 右按钮点击事件
    btnRight.addEventListener("click", () => {
        currentIndex = (currentIndex + 1) % uls.length; // 循环到下一个
        showCurrentUl();
    });
});